<template>
	<view class="bac-col-05">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- 顶部导航 -->
		<!-- #ifdef MP-WEIXIN -->
		<view>
			<qmy-custom-navbar titleSize="30rpx" :path="`/qmy_user/user/myPage?usid=${activityData.user.id}`"
				:userGender="activityData.user.gender"
				:imgUrl="activityData.user.avatar|| 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
				:title="activityData.user.username|| '匿名用户'"></qmy-custom-navbar>
		</view>
		<!-- #endif -->
		<!-- 轮播 -->
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{marginTop:menuObject.top + menuObject.height + 8 +'px'}" class="h-100">
		<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="h-100">
			<!-- #endif -->
				<z-swiper ref="zSwiper" @slideChange="onChange" v-model="activityData.images" :options="options"
					:customStyle="{height:imageHeights[activeIndex] + 'px',transition: 'height 0.3s ease-in-out'}">
					<z-swiper-item v-for="(item,index) in activityData.images" :key="index"
						@click="$previewImage(activityData.images,index)">
						<image class="w-100 h-100" :src="item" mode="widthFix"
							@load="(event) => onImageLoad(index, event)"
							:style="{height:'auto',transition: 'height 0.3s ease-in-out'}">
						</image>
					</z-swiper-item>
				</z-swiper>
			</view>
			<!-- 社群二维码弹窗 -->
			<uni-popup ref="groupPopup" type="center">
				<view class="group-popup-con">
					<image @click="saveQrcode"
						:src="activityData.group_qrcode && activityData.group_qrcode[0]?activityData.group_qrcode[0].src : ''"
						class="group-qrcode" />
					<view class="fs-28 fw-600 mt-5">微信扫码加入活动社群</view>
					<view class="fs-24 col-b1 mt-5">(点击二维码保存)</view>
				</view>
			</uni-popup>
			<!-- 报名信息弹窗 -->
			<uni-popup ref="signupPopup" type="bottom" backgroundColor="#fff" border-radius="20rpx 20rpx 0 0">
				<view class="slanted-rectangle">
					<scroll-view class="h-40-vh ping-30" scroll-y>
						<view v-for="(item,index) in activityData.registrationUsers" :key="index" :class="index == 0?'pt-0':''"
							@click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.id}`)"
							class="flex-dir-row ali-item-cen flex-x-bet ping-20-0 bor-bottom-f3">
							<view class="flex-dir-row ali-item-cen">
								<qmy-gender-border iconBottom="4rpx" iconWidth="30rpx" iconHeight="30rpx"
									iconSize="24rpx" iconLineHeight="30rpx" :gender="item.gender"
									:avatar="item.avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
									:avatarWidth="100 + 'rpx'" :avatarHeight="100 + 'rpx'"></qmy-gender-border>
								<view class="flex-dir-col flex-x-bet ml-20" style="height: 90rpx;">
									<view class="fs-32">{{item.username || '匿名用户'}}</view>
									<view class="fs-28 col-87">
										报名时间：{{item.activityRegistrationTime?$formatDate3(item.activityRegistrationTime) : ''}}</view>
								</view>
							</view>
							<view class="fs-28 col-00ba31">
								查看</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
			<view class="bac-col-05 pos-rela bot-con">
				<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/bl.png"
					class="w-100 h-60 pos-abso img-min" />
				<view class="ping-20 w-100 pt-60 bac-col-f">
					<view class="fs-28 flex-dir-col flex-x-bet">
						<view class="fs-36 fw-600">{{activityData.title || ''}}</view>
						<view class="flex-dir-row ali-item-cen">
							<view v-for="tag in activityData.tags" :key="tag" class="text-tips bac-col-00b">
								{{tag}}
							</view>
						</view>
						<view class="flex-dir-row flex-x-bet ali-item-cen col-54 mt-20 pt-20 bor-top-f3 fw-600">
							<view class="flex-dir-row ali-item-cen">
								<view class="iconfont ic-baoming mr-10 fs-36"></view>
								<view>报名：{{$formatDate(activityData.registrationStartTime) || ''}} -
									{{$formatDate(activityData.registrationEndTime || '')}}
								</view>
							</view>
							<!-- 判断当前时间是否在报名时间范围前后,未开始、报名中、已结束 -->
							<view class="fs-24  text-ali-c "
								:class="new Date(activityData.registrationStartTime).getTime() < Date.now() && Date.now() < new Date(activityData.registrationEndTime).getTime() ? 'col-00ba31 start-con bac-col-68' : 'col-0a2e365e end-con bac-col-0a20a'">
								{{new Date(activityData.registrationStartTime).getTime()< Date.now() && Date.now() < new Date(activityData.registrationEndTime).getTime() ? '报名中' : new Date(activityData.registrationStartTime).getTime() < Date.now() ? '已结束' : '未开始'}}
							</view>
						</view>
						<view class="flex-dir-row flex-x-bet ali-item-cen col-54 mt-20 pt-20 bor-top-f3 fw-600">
							<view class="flex-dir-row ali-item-cen">
								<view class="iconfont ic-shijianxuanzeqi mr-10 fs-36"></view>
								<view>开始：{{$formatDate(activityData.startTime) || ''}} -
									{{$formatDate(activityData.endTime) || ''}}
								</view>
							</view>
							<view class="fs-24  text-ali-c "
								:class="new Date(activityData.startTime).getTime()< Date.now() && Date.now() < new Date(activityData.endTime).getTime() ? 'col-00ba31 start-con bac-col-68' : 'col-0a2e365e end-con bac-col-0a20a'">
								{{new Date(activityData.startTime).getTime() < Date.now() && Date.now() < new Date(activityData.endTime).getTime() ? '进行中' : new Date(activityData.startTime).getTime() < Date.now() ? '已结束' : '未开始'}}
							</view>
						</view>
						<view class="flex-dir-row flex-x-bet ali-item-cen col-54 mt-20 pt-20 bor-top-f3 fw-600">
							<view class="flex-dir-row ali-item-cen">
								<view class="iconfont ic-weizhi mr-10 fs-36"></view>
								<view class="text-element-2">{{activityData.address || ''}}</view>
							</view>
							<!-- #ifdef MP-WEIXIN -->
							<view @click="nav"
								class="btn-bg br-10 flex-dir-row flex-center btn-dimensions flex-shrink-0">
								<view class="iconfont ic-luxian gradient-text"></view>
								<view class="gradient-text">导航</view>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<!-- 活动礼品 -->
				<view v-if="activityData.giftId && activityData.gift.goodsName" class="mt-20 bac-col-f ping-20 pos-rela">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600 flex-dir-row ali-item-cen">
							<view class="ali-item-cen">
								<image
									src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
									style="width: 40rpx;height: 40rpx;"></image>
								<text>活动礼品</text>
							</view>
						</view>
						<view @click="$NavigateTo(`/pages/detail/goodsDetail?id=${activityData.gift_detail}`)"
							class="col-00ba31 fs-26 flex-dir-row ali-item-cen">
							<view>查看详情</view>
							<view class="iconfont ic-you fs-34 mt-5"></view>
						</view>
					</view>
					<view class="gift-container"
						@click="$NavigateTo(`/pages/detail/goodsDetail?id=${activityData.gift_detail}`)">
						<image class="gift-image" :src="activityData.gift.mainImage" mode="aspectFill"></image>
						<view class="gift-info">
							<view class="gift-name">{{activityData.gift.goodsName}}</view>
							<view class="gift-tag">活动专属好礼</view>
							<view class="gift-price" v-if="activityData.gift.marketPrice">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{activityData.gift.marketPrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="mt-20 bac-col-f ping-20 pos-rela">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600 flex-dir-row ali-item-cen">
							<view class="ali-item-cen">
								<image
									src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
									style="width: 40rpx;height: 40rpx;"></image>
								<text>已报名活动用户</text>
							</view>
							<view class="ml-5">
								({{activityData.registrationParticipants || 0}}/{{activityData.maxParticipants}})
							</view>
						</view>
						<view @click="signupPopup" class="col-00ba31 fs-26 flex-dir-row ali-item-cen">
							<view>查看全部</view>
							<view class="iconfont ic-you fs-34 mt-5"></view>
						</view>
					</view>
					<liu-photo-list ref="photo" :dataList="activityData.registrationUsers" @change="change"></liu-photo-list>
				</view>

				<view class="mt-20 bac-col-f pb-30" style="min-height:300rpx;">
					<view class="fs-28 fw-600 ping-20 ali-item-cen">
						<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
							style="width: 40rpx;height: 40rpx;"></image>
						<text>活动详情</text>
					</view>
					<mp-html :content="activityData.description || ''" />
				</view>
			</view>
			<!-- 底部导航 -->
			<view class="bottom-h bac-col-f w-100 bor-top-f3 bottom-nav-bg">
				<view class="flex-dir-row ali-item-cen flex-x-spa fs-24 text-ali-c">
					<view @click="call">
						<view class="iconfont ic-dianhua fs-50 fw-600 lh-50"></view>
						<view class="col-87 lh-30">电话</view>
					</view>
					<view @click="groupPopup">
						<view class="iconfont ic-qunliao fs-46 fw-600 lh-50"></view>
						<view class="col-87 lh-30">社群</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share">
						<view class="iconfont ic-fenxiang fs-50 fw-600 lh-50"></view>
						<view class="col-87 fs-24 lh-30">分享</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view @click="$Toast('H5暂不开放分享')">
						<view class="iconfont ic-fenxiang fs-46 fw-600 lh-50"></view>
						<view class="col-87 lh-30">分享</view>
					</view>
					<!-- #endif -->
					<view>
						<view v-if="activityData.registrationParticipants < activityData.maxParticipants" @click="signUp"
							class=" br-200 text-ali-c "
							:class="activityData.signUpStatus&& activityData.paymentStatus?'btntk-bg ping-10 fs-26':'btn-bg btn-hw fs-28'">
							<view class="gradient-text ">
								<view class="text-element-1">
									{{activityData.signUpStatus ? '取消报名' : !activityData.signUpStatus && !activityData.paymentStatus ? `报名(￥${activityData.price})` : '报名'}}
								</view>
								<view v-if="activityData.signUpStatus && activityData.paymentStatus" class="fs-20 ">
									并退款￥{{activityData.price}}</view>
							</view>
						</view>
						<view v-else @click="$Toast('抱歉，此活动已满员')" class="btn-bg br-200 text-ali-c btn-hw">
							<view class="gradient-text fs-28">已满员</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
	import qmyGenderBorder from '../../components/qmy-gender-border/qmy-gender-border.vue';
  import { getActivityByIdApi } from '@/api/activity/activity.js';
	export default {
		components: {
			qmyGenderBorder
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: {
					top: 19,
					height: 28,
					width: 77
				},
				// #endif
				activityId: '1', //活动id
				activityData: {
					_id: '1',
					name: '周末户外徒步活动 - 探索美丽山川',
					user_id: 'user001',
					user_name: '户外达人小王',
					user_gender: 1,
					user_avatar: 'https://picsum.photos/200/200?random=1',
					user_mobile: '13800138000',
					imgs: [
						{src: 'https://picsum.photos/800/600?random=10'},
						{src: 'https://picsum.photos/800/600?random=11'},
						{src: 'https://picsum.photos/800/600?random=12'}
					],
					tags: ['户外', '徒步', '周末', '健康'],
					signup_start_time: Date.now() - 86400000, // 昨天开始报名
					signup_end_time: Date.now() + 86400000 * 3, // 3天后结束报名
					start_time: Date.now() + 86400000 * 7, // 7天后开始活动
					end_time: Date.now() + 86400000 * 7 + 28800000, // 活动持续8小时
					location: '北京市昌平区十三陵水库风景区',
					location_lat: 40.2919,
					location_lng: 116.1951,
					people_num: 20,
					content: '<p>这是一次精彩的户外徒步活动！</p><p>我们将一起探索美丽的山川，呼吸新鲜空气，享受大自然的美好。</p><p><strong>活动亮点：</strong></p><ul><li>专业领队带队</li><li>风景优美的徒步路线</li><li>结交志同道合的朋友</li><li>免费提供矿泉水和小食</li></ul><p><strong>注意事项：</strong></p><ul><li>请穿着舒适的运动鞋</li><li>建议携带防晒用品</li><li>活动当天请准时到达集合地点</li></ul>',
					is_pay: true,
					pay_amount: 5000, // 50元
					gift_id: 'gift001',
					gift_name: '户外运动水杯',
					gift_price: 8800, // 88元
					gift_image: [{url: 'https://picsum.photos/300/300?random=20'}],
					gift_detail: 'gift001',
					group_qrcode: [{src: 'https://picsum.photos/300/300?random=30'}],
					contact_phone: '13800138000'
				}, //活动数据
				activeIndex: 0, //当前轮播图片索引
				imageHeights: [600, 600, 600], // 用于存储每张图片的高度
				options: {
					autoHeight: false,
					initialSlide: 0, //初始显示的图片下标
					pagination: {
						el: true,
						type: 'bullets', //类型bullets 圆点（默认） fraction 分式 progressbar 进度条 custom 自定义
						dynamicBullets: true, //数量会部分隐藏
						clickable: true, //允许点击分页器
					},
					loop: false, //循环
				},
				signupData: [
					{
						user_id: 'user001',
						user_name: '小明',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=2',
						signup_time: Date.now() - 3600000,
						signup_status: 0
					},
					{
						user_id: 'user002',
						user_name: '小红',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=3',
						signup_time: Date.now() - 7200000,
						signup_status: 0
					},
					{
						user_id: 'user003',
						user_name: '小李',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=4',
						signup_time: Date.now() - 10800000,
						signup_status: 0
					},
					{
						user_id: 'user004',
						user_name: '小张',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=5',
						signup_time: Date.now() - 14400000,
						signup_status: 0
					},
					{
						user_id: 'user005',
						user_name: '小王',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=6',
						signup_time: Date.now() - 18000000,
						signup_status: 0
					}
				], //报名数据
				signupStatus: false, //报名状态
				dataLoaded: true, //数据加载完成
			};
		},
		computed: {
			userInfo() {
				// 返回写死的用户信息用于测试
				return {
					id: 'current_user',
					name: '测试用户',
					avatar: 'https://picsum.photos/200/200?random=100'
				}
				// return this.$store.state.userInfo; //用户信息
			},
		},
		onLoad(e) {
      console.log("ssssL",e.id)
			this.activityId = e.id || '1';
			// 使用写死的数据，注释掉API调用
			this.getActivityDetail();
			// this.getSignupData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataLoaded = false; //数据加载完成
			// 使用写死的数据，注释掉API调用
			// this.getActivityDetail();
			// this.getSignupData();
			// 模拟加载完成
			setTimeout(() => {
				this.dataLoaded = true;
				uni.stopPullDownRefresh();
			}, 500);
		},
		onShow() {
			// 报名后返回时刷新报名数据
			// 使用写死的数据，注释掉API调用
			// this.getSignupData();
		},
		methods: {
			// 开始支付
			openPay() {
				// 防抖
				this.$debounce(() => {
					// 模拟支付成功
					uni.showLoading({
						title: '支付中...'
					});
					
					setTimeout(() => {
						uni.hideLoading();
						// 模拟支付成功
						this.signupStatus = true;
						// 添加当前用户到报名列表
						this.signupData.unshift({
							user_id: this.userInfo.id,
							user_name: this.userInfo.name,
							user_gender: 1,
							user_avatar: this.userInfo.avatar,
							signup_time: Date.now(),
							signup_status: 0
						});
						uni.showToast({
							title: '支付成功，报名完成！',
							icon: 'success',
							duration: 2000
						});
					}, 2000);
				}, 500, true, "openPay")
			},
			// 唯一订单号生成函数
			generateOrderNumber() {
				const timestamp = Date.now(); // 获取毫秒级时间戳
				const randomNum = Math.floor(Math.random() * 1000000); // 6位随机数
				return `${timestamp}${randomNum}`;
			},
			// 去除活动名称中的表情符号
			removeEmoji(text) {
				return text.replace(/[\u{1F600}-\u{1F64F}]/gu, '') // 表情符号
					.replace(/[\u{1F300}-\u{1F5FF}]/gu, '') // 符号、图标
					.replace(/[\u{1F680}-\u{1F6FF}]/gu, '') // 交通、地图符号
					.replace(/[\u{1F700}-\u{1F77F}]/gu, '') // 字母符号
					.replace(/[\u{1F780}-\u{1F7FF}]/gu, '') // 几何图形
					.replace(/[\u{1F800}-\u{1F8FF}]/gu, '') // 补充符号
					.replace(/[\u{1F900}-\u{1F9FF}]/gu, '') // 表情补充符号
					.replace(/[\u{2600}-\u{26FF}]/gu, '') // 杂项符号
					.replace(/[\u{2700}-\u{27BF}]/gu, ''); // 杂项符号
			},
			// 报名信息弹窗
			signupPopup() {
				if (!this.activityData.registrationUsers) {
					uni.showToast({
						title: '暂无报名用户',
						icon: 'none'
					});
					return
				}
				this.$refs.signupPopup.open();
			},
			// 获取活动详情
			async getActivityDetail() {
        try{
          const res = await getActivityByIdApi(this.activityId);
          if ( res.data.code === 200 ){
            this.activityData = res.data.data;
            this.activityData.tags = JSON.parse(this.activityData.tags);
            this.activityData.images = JSON.parse(this.activityData.images);
            console.log(typeof(this.activityData.tags))
      
          }else{
            this.$Toast('获取活动详情失败');
          }
        }catch(e){
          console.log('获取活动详情失败:',e);
        }
				// this.$Route('get-public-data', true).getActivityDetail(this.activityId).then((res) => {
				// 	this.activityData = res.data[0];
				// 	uni.stopPullDownRefresh();
				// 	this.dataLoaded = true; //数据加载完成
				// }).catch((err) => {
				// 	console.error('遇到错误:', err); // 打印错误信息
				// 	let {
				// 		code,
				// 		msg
				// 	} = this.$parseError(err); // 调用公共解析方法
				// 	this.$Toast(msg);
				// 	setTimeout(() => {
				// 		this.$NavigateBack();
				// 	}, 1600);
				// });
			},
			// 获取报名数据
			getSignupData() {
				this.$Route('get-public-data', !this.dataLoaded).getSignupData(this.activityId).then((res) => {
					this.signupData = res.data;
					// 如果当前用户在报名数据中，则设置报名状态为已报名
					if (this.signupData.some(item => item.user_id == this.userInfo.id && item.signup_status ==
							0)) {
						this.signupStatus = true;
					} else {
						this.signupStatus = false;
					}
					this.$refs.photo.adjustMainInfoHeight()
				})
			},
			// 报名\取消报名
			signUp() {
				// 报名节流
				this.$debounce(() => {
					// 震动
					uni.vibrateShort();
					if (!this.signupStatus) {
						// 模拟报名成功
						if (this.activityData.is_pay) {
							// 付费活动，打开支付
							this.openPay();
						} else {
							// 免费活动，直接报名成功
							this.signupStatus = true;
							// 添加当前用户到报名列表
							this.signupData.unshift({
								user_id: this.userInfo.id,
								user_name: this.userInfo.name,
								user_gender: 1,
								user_avatar: this.userInfo.avatar,
								signup_time: Date.now(),
								signup_status: 0
							});
							uni.showToast({
								title: '报名成功！',
								icon: 'success'
							});
						}
					} else {
						// 取消报名
						this.signupStatus = false;
						// 从报名列表中移除当前用户
						this.signupData = this.signupData.filter(item => item.user_id !== this.userInfo.id);
						uni.showToast({
							title: '取消报名成功',
							icon: 'success'
						});
					}
				}, 500, true, "signUp")
			},
			// 地图导航
			nav() {
				uni.openLocation({
					latitude: Number(this.activityData.location_lat),
					longitude: Number(this.activityData.location_lng), //保留5位小数
					name: this.activityData.location || '',
				})
			},
			// 社群二维码弹窗
			groupPopup() {
				// 判断用户是否报名
				if (!this.signupStatus) {
					uni.showToast({
						title: '请先报名活动',
						icon: 'none'
					});
					return
				}
				if (!this.activityData.group_qrcode || !this.activityData.group_qrcode.length) {
					uni.showToast({
						title: '此活动暂无社群',
						icon: 'none'
					});
					return
				}
				this.$refs.groupPopup.open();
			},
			// 保存社群二维码
			saveQrcode() {
				uni.downloadFile({
					url: this.activityData.group_qrcode[0].src || '',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							}
						})
					}
				})
			},
			// 拨打电话
			call() {
				// 先判断用户是否已经报名
				if (!this.signupStatus) {
					uni.showToast({
						title: '请先报名活动',
						icon: 'none'
					});
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.activityData.contact_phone || this.activityData.user_mobile || ''
				})
			},
			change(id) {
				this.$NavigateTo(`/qmy_user/user/myPage?usid=${id}`)
			},
			onChange() {
				//当前轮播图片索引
				this.activeIndex = this.$refs.zSwiper.swiper.activeIndex;
			},
			// 获取当前图片高度
			onImageLoad(index, event) {
				const {
					width,
					height
				} = event.detail;
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				const scaledHeight = (screenWidth / width) * height; //根据屏幕宽度等比缩放扩大高度
				this.$set(this.imageHeights, index, scaledHeight);
			},
		}
	};
</script>

<style scoped>
	.shu-x {
		height: 25rpx;
		width: 1rpx;
		background: #f0f0f0;
	}

	.group-popup-con {
		padding: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		text-align: center;
	}

	.group-qrcode {
		width: 350rpx;
		height: 350rpx;
	}

	.wh-45 {
		width: 45rpx;
		height: 45rpx;
	}

	.bot-con {
		margin-top: -60rpx;
		padding-bottom: calc(90rpx + env(safe-area-inset-bottom))
	}

	.end-con {
		width: 120rpx;
		height: 45rpx;
		border-radius: 10rpx;
		font-weight: normal;
		line-height: 45rpx;
	}

	.start-con {
		width: 120rpx;
		height: 45rpx;
		border-radius: 10rpx;
		font-weight: normal;
		line-height: 45rpx;
	}

	.img-min {
		top: 0;
		z-index: 1;
		height: 60rpx;
	}

	.text-tips {
		padding: 5rpx 10rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		color: #ffffff;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.bottom-nav-bg {
		position: fixed;
		bottom: 0;
		padding-top: 20rpx;
		z-index: 99999;
	}

	.btn-dimensions {
		width: 140rpx;
		height: 45rpx;
		line-height: 45rpx;
	}

	.btn-hw {
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	/* 退款按钮 */
	.btntk-bg {
		width: 400rpx;
		background: #0a2e36;
		height: auto;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.btntk-bg:active {
		transform: scale(0.9);
		/* 点击时按钮缩小 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
		/* 点击时添加阴影 */
	}

	.btn-bg:active {
		transform: scale(0.9);
		/* 点击时按钮缩小 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
		/* 点击时添加阴影 */
	}

	button {
		background-color: #ffffff00;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 0rpx !important;
	}


	.slanted-rectangle {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		bottom: -20rpx;
		z-index: 2;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -55rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	/* 礼品展示样式 */
	.gift-container {
		display: flex;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		align-items: center;
	}

	.gift-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		background-color: #f0f0f0;
		flex-shrink: 0;
	}

	.gift-info {
		height: 160rpx;
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.gift-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.gift-price {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 24rpx;
		color: #ff4f4f;
	}

	.price-value {
		font-size: 32rpx;
		color: #ff4f4f;
		font-weight: bold;
	}

	.gift-tag {
		display: inline-block;
		background-color: rgba(255, 79, 79, 0.1);
		color: #ff4f4f;
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
</style>
